import { ref} from 'vue'
import * as echarts from 'echarts'


export function useOrgDistributionChart() {
  const orgDistributionChart = ref(null)
  
  // 初始化图表的通用函数
  const initChart = (chartRef, option) => {
    if (!chartRef.value) return
    const chart = echarts.init(chartRef.value)
    chart.setOption(option)
    
    // 添加响应式调整
    window.addEventListener('resize', () => {
      chart.resize()
    })
    
    return chart
  }

  // 图表1：党组织分布 - 饼图
  const initOrgDistributionChart = async (data) => {
    // 直接使用API返回的数据
    const organizations = data;
    // 数据已经是格式化好的，直接使用
    let chartData = organizations;
    
    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#1890ff',
        textStyle: { color: '#fff' },
        formatter: (params) => `${params.name}<br/>党组织数: ${params.value}<br/>党员总数: ${params.data.memberCount}<br/>员工总数: ${params.data.employeeCount}`
      },
      legend: {
        orient: 'horizontal',
        right: 10,
        top: 10,
        textStyle: { color: '#fff', fontSize: 12 }
      },
      series: [{
        name: '党组织分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8,
          borderColor: '#0a192f',
          borderWidth: 2
        },
        label: {
          show: true,
          color: '#fff',
          formatter: '{b}\n{d}%'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        data: chartData
      }]
    }
    
    initChart(orgDistributionChart, option)
  }

  return {
    orgDistributionChart,
    initOrgDistributionChart
  }
}